<template>
  <div style="margin-top: 50px;margin-left: 500px">
    <el-form :model="attrForm" :rules="rules" ref="spuInfoDetailForm" label-width="120px" style="width: 600px" size="small">
      <el-form-item label="商品分类：" prop="kindsId">
        <el-select
          v-model="attrForm.kindsId"
          placeholder="请选择商品分类"
          @change="selectKindsChange"
          :options="productCateOptions">
          <el-option v-for="kinds in productCateOptions" :key="kinds.kindsId" :label="kinds.kindsName" :value="kinds.kindsId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称：" prop="spuName">
        <el-input v-model="attrForm.spuName"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌：" prop="spuBrandId">
        <el-select
          v-model="attrForm.spuBrandId"
          @change="handleBrandChange"
          placeholder="请选择品牌">
          <el-option
            v-for="item in brandOptions"
            :key="item.spuBrandId"
            :label="item.spuBrandName"
            :value="item.spuBrandId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品介绍：" prop="spuDesc">
        <el-input
          :autoSize="true"
          v-model="attrForm.spuDesc"
          type="textarea"
          placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="市场价：" prop="spuMoney">
        <el-input v-model="attrForm.spuMoney"></el-input>
      </el-form-item>
      <el-form-item label="计量单位：" prop="spuMeterage">
        <el-input v-model="attrForm.spuMeterage"></el-input>
      </el-form-item>
      <el-form-item label="商品重量：" prop="spuWeight">
        <el-input v-model="attrForm.spuWeight" style="width: 300px"></el-input>
        <span style="margin-left: 20px">克</span>
      </el-form-item>
      <el-form-item label="服务保证：" prop="serviceEnsures">
        <el-checkbox-group v-model="attrForm.serviceEnsures" @change="selectServiceEnsureChanage">
          <el-checkbox v-for="serviceEnsure in serviceEnsureList" :label="serviceEnsure.serviceEnsureId">{{serviceEnsure.serviceEnsureName}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="商品关键字：" prop="spuKeyword">
        <el-input v-model="attrForm.spuKeyword"></el-input>
      </el-form-item>
      <el-form-item label="商品规格：" >
        <el-card class="box-card">
          <el-button
            class="btn-add"
            @click="handleAddProduct()"
            size="mini">
            添加
          </el-button>

          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column v-for="(leftTitle, index) in attrList" :key="leftTitle.attrId" :label="leftTitle.attrName" prop="attrValue">
              <template slot-scope="scope">
                <span v-for="values in leftTitle.spuAttrValueList">
                  {{getAttrValue(values)}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="skuName"
              label="规格名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="price"
              label="价格"
              width="180">
            </el-table-column>
            <el-table-column
              prop="sum"
              label="库存">
            </el-table-column>
            <el-table-column
              prop="skuImg"
              label="规格图片">
              <template slot-scope="scope">
                <img style="height: 80px;width: 80px" :src="scope.row.skuImg">
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-form-item>

    </el-form>



    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form ref="productAttrCatForm" :model="skuListForm" label-width="120px">
        <el-form-item v-for="(leftTitle, index) in attrList" :key="leftTitle.attrId" :label="leftTitle.attrName" prop="attrValue">
          <template slot-scope="scope">
            <el-card shadow="never">
                <el-checkbox-group v-model="attrForm.spuAttrValueList" @change="selectValueChange">
                  <el-checkbox v-for="item in leftTitle.spuAttrValueList" :label="item" :key="item.attrValueId"
                               class="littleMarginLeft">{{item.attrValue}}</el-checkbox>
                </el-checkbox-group>
            </el-card>
          </template>
        </el-form-item>
        <el-form-item label="商品属性" prop="attrId">
          <el-radio-group v-model="skuListForm.attr" @change="selectAttrChange">
            <el-radio   v-for="item in attrList" :label="item">{{item.attrName}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品属性值" prop="attrValue">
          <el-checkbox-group v-model="skuListForm.spuAttrValueList" @change="selectValueChange">
            <el-checkbox v-for="attrValue in spuAttrValueList" :label="attrValue">{{attrValue.attrValue}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="规格库存：" prop="sum">
          <el-input v-model="skuListForm.sum"></el-input>
        </el-form-item>
        <el-form-item label="单价：" prop="price">
          <el-input v-model="skuListForm.price"></el-input>
        </el-form-item>
        <el-form-item label="规格图片" prop="skuImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8101/skuUpload/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="skuListForm.skuImg" :src="skuListForm.skuImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm(skuListForm)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

    export default {
        name: "addSpu",
      data(){
        return{
          tableData:[],
          dialogTitle:"",
          dialogVisible:false,
          attrForm:{
            kindsId:'',
            spuName:'',
            spuBrandId:'',
            spuDesc:'',
            spuMoney:'',
            spuMeterage:'',
            spuWeight:'',
            spuKeyword:'',
            serviceEnsures:[],
            spuAttrValueList:[],
            skuName:'',
            sum:'',
            price:'',
            skuImg:'',
            attr:'',
          },
          spuAttrName:'',

          skuListForm:{
            sum:'',
            price:'',
            skuImg:'',
            attr:[],
            spuAttrValueList:[],
            skuName:'',
          },
          spuAttrValueList:[],
          tests:[],
          v:'',
          attrList:[],
          attrList2:[],
          serviceEnsures:[],
          serviceEnsureList:[],
          selectProductCateValue: [],
          productCateOptions: [],
          brandOptions:[],
          rules: {
            spuName: [
              {required: true, message: '请输入商品名称', trigger: 'blur'},
              {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
            ],
            spuTypeId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
            brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
            spuDesc: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
          }
        }
      },
      created(){
        this.getProductCateList();
        this.getBrandList();
        this.getServiceEnsuresList();
      },
      methods:{
        getAttrValue(value){
          // console.log(value)
          for (let i = 0; i < this.tests.length; i++) {
            //console.log(this.tests[i]);
            if(this.tests[i].attrValue==value.attrValue){
              this.v+=this.tests[i].attrValue;
            //  return this.tests[i].attrValue;
            }
          }
          console.log(this.v)
        },

          /*添加*/
        handleAddProduct(){
            this.dialogVisible=true;
        },
          /*选中的商品属性值*/
        selectValueChange(value){
          this.tests=value;
        },
        /*获取选择的商品属性*/
        selectAttrChange(value){
          this.$axios({
            method: 'get',
            url: 'http://localhost:8101/spuAttrValue/getAttrValues/'+value.attrId,
          }).then(result=>{

            this.spuAttrValueList=result.data;
          })
        },
          /*获取选择的服务*/
        selectServiceEnsureChanage(value){
          console.log(value)
        },
        /*获取选择的商品分类*/
        selectKindsChange(value){
          /*根据选择的商品分类去查找商品属性*/
          this.$axios({
            method: 'get',
            url: 'http://localhost:8101/spuAttr/findAllById/'+value,
          }).then(result=>{
            this.attrList=result.data;
          })
        },

        /*获取所有的服务*/
        getServiceEnsuresList(){
          this.$axios({
            method: 'get',
            url: 'http://localhost:8101/serviceEnsure/findAll',
          }).then(result=>{

            this.serviceEnsureList=result.data;
          })
        },

        /*商品分类*/
        getProductCateList() {
          this.$axios({
            method: 'get',
            url: 'http://localhost:8101/kinds/findAllKinds',
          }).then(result=>{
            this.productCateOptions=result.data;
          })
        },
        /*商品品牌*/
        getBrandList() {
          this.$axios({
            method: 'get',
            url: 'http://localhost:8101/spuBrand/findAllBrand',
          }).then(result=>{
            this.brandOptions=result.data;
          })
        },
        handleConfirm(value){
          let attrValue='';
          for (let i = 0; i < value.spuAttrValueList.length; i++) {
            attrValue+=value.spuAttrValueList[i].attrValue;
          }
          value.skuName=value.attr.attrName+":"+attrValue
         // console.log(value)
          this.tableData.push(value);
        },
        /**/
        handleBrandChange(val) {
          console.log(val)
        },


        handleAvatarSuccess(res, file) {
          this.attrForm.skuImg = URL.createObjectURL(file.raw);
          console.log(this.imageUrl)
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        }
      }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
